<template>
	<view class="page" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
		<c-nav-bar :title="title" :showHome="false"></c-nav-bar>
		<view class="hander">
			<view class="search-input">
				<u-search placeholder="请输入工作室" searchIconSize='40' showAction='false' v-model="studioName"
					animation='false' @blur='search'></u-search>
			</view>
		</view>

		<view class="content">
			<view class="item" v-for="(item,index) in dataList" :key="index"
				@click="toHref('/pages/index/travelBooking/detail?id='+item.id)">
				<image :src="item.pic"></image>
				<view class="info">
					<!-- <view class="name">{{item.studioName}}</view> -->
					<view class="name">{{item.studioName}} {{item.waresThali}}</view>
					<view class="marks">
						<text v-if="item.labelList !=''" v-for="ite,ids in item.labelList">{{ite}}</text>
						<!-- <text>免费寄送</text> -->
					</view>
					<view class="price"><text>￥</text><text>{{item.price}}</text></view>
				</view>
			</view>
			<nodata v-if="dataList.length === 0"></nodata>

		</view>
	</view>
</template>

<script>
	import nodata from '@/compoments/NoData/index.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				h: uni.getSystemInfoSync().windowHeight,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				title: '旅拍预约',
				dataList: [],
				img: 'https://i.ringzle.com/file/20231030/5a47c178cb6c4de88a331b27edb8d857.png',
				studioName: '', //旅拍预约搜索

			}
		},
		onLoad() {
			this.getList()
		},
		methods: {

			// 搜索
			search(e) {
				console.log(e);
				this.studioName = e
				this.$api.get('/api/tourShoot/searchStudio?studioName=' + this.studioName).then(res => {
					console.log(res);
					this.dataList = res.data.data
				})
				// this.studioName = ''
			},

			getList() {
				this.$api.get('/api/tourShoot/followUp').then(res => {
					console.log(res);
					this.dataList = res.data.data
				})
			},

			toHref(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>
<style lang="less">
	.u-search__content {
		padding: 20rpx !important;
	}

	// .u-icon__icon {
	// 	font-size: 40rpx !important;
	// }
</style>

<style lang="scss" scoped>
	page,
	.page {
		background-color: #F5F8FA;
		padding: 20rpx 0 30rpx;
		height: 100%;

		// margin-bottom: 40rpx;
		.content {
			width: 94%;
			margin: 0 auto;
		}
	}

	.hander {
		padding: 24rpx !important;
		box-sizing: border-box;
		background-color: #fff;
		// height: 64rpx;
	}

	.search-input {
		// position: fixed;
		// width: ;
		height: 64rpx;
		width: 100%;
		// padding: ;
		margin-bottom: 20rpx;



	}

	// .header{
	// 	margin-bottom: 40rpx;
	// }
	.item {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 24rpx 20rpx;
		margin-bottom: 20rpx;
		display: flex;

		image {
			border-radius: 16rpx;
			width: 190rpx;
			min-width: 190rpx;
			height: 190rpx;
			margin-right: 20rpx;
		}

		.name {
			font-weight: Bold;
			width: 450rpx;
			font-size: 32rpx;
			color: #333;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			/* 指定最大行数 */
			-webkit-box-orient: vertical;
			/* 垂直排列文本 */
			overflow: hidden;
			height: 84rpx;
			// font-size: 28rpx !important;
			// color: #333 !important;
		}

		.marks {
			display: flex;
			margin: 20rpx 0 16rpx;
			height: 32rpx;

			text {
				display: inline-block;
				padding: 0 8rpx;
				height: 32rpx;
				line-height: 30rpx;
				color: #AAAAAA;
				border: 1rpx solid #CCCCCC;
				border-radius: 4rpx;
				margin-right: 12rpx;
				font-size: 20rpx;
			}
		}

		.price {
			text-align: right;

			text {
				color: #FD3939;

				&:nth-child(1) {
					font-size: 20rpx;
					font-weight: Regular;
				}

				&:nth-child(2) {
					font-size: 32rpx;
					font-weight: Bold;
				}
			}
		}
	}
</style>